<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>关键指标监控</title>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card-header { font-weight: bold; font-size: 18px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
        .tab { padding: 10px 15px; cursor: pointer; border-bottom: 2px solid transparent; }
        .tab.active { border-bottom: 2px solid var(--primary-color); color: var(--primary-color); font-weight: bold; }
        .filter-row { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter-item { min-width: 200px; }
        .filter-item label { display: block; margin-bottom: 5px; font-size: 14px; }
        .filter-item select, .filter-item input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: var(--primary-color); color: white; }
        .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .btn-sm { padding: 4px 8px; font-size: 12px; }
        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .kpi-card { position: relative; }
        .kpi-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
        .kpi-title { font-weight: bold; }
        .kpi-value { font-size: 24px; font-weight: bold; margin: 10px 0; }
        .kpi-status { font-size: 13px; margin-bottom: 10px; }
        .kpi-progress { height: 10px; background-color: #e9ecef; border-radius: 4px; margin-bottom: 5px; overflow: hidden; }
        .kpi-progress-bar { height: 100%; border-radius: 4px; }
        .kpi-on-track { background-color: #28a745; }
        .kpi-at-risk { background-color: #ffc107; }
        .kpi-off-track { background-color: #dc3545; }
        .kpi-meta { display: flex; justify-content: space-between; font-size: 12px; color: #666; }
        .kpi-trend { height: 40px; margin: 10px 0; }
        .kpi-actions { position: absolute; top: 15px; right: 15px; }
        .alert-btn { display: inline-flex; align-items: center; background: none; border: none; color: #666; cursor: pointer; font-size: 13px; }
        .alert-on { color: var(--primary-color); }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <div class="header">
                <h1>关键指标监控</h1>
                <div>
                    <button class="btn btn-primary" onclick="createKPI()">添加指标</button>
                </div>
            </div>
            
            <div class="tabs">
                <div class="tab active" onclick="switchTab('all')">所有指标</div>
                <div class="tab" onclick="switchTab('sales')">销售指标</div>
                <div class="tab" onclick="switchTab('customer')">客户指标</div>
                <div class="tab" onclick="switchTab('service')">服务指标</div>
                <div class="tab" onclick="switchTab('finance')">财务指标</div>
            </div>
            
            <div class="filter-row">
                <div class="filter-item">
                    <label>时间范围</label>
                    <select id="timeRangeFilter" onchange="updateKPIs()">
                        <option value="week">本周</option>
                        <option value="month" selected>本月</option>
                        <option value="quarter">本季度</option>
                        <option value="year">本年度</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>状态</label>
                    <select id="statusFilter" onchange="updateKPIs()">
                        <option value="all">所有状态</option>
                        <option value="on-track">正常</option>
                        <option value="at-risk">风险</option>
                        <option value="off-track">异常</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>责任人</label>
                    <select id="ownerFilter" onchange="updateKPIs()">
                        <option value="all">所有人员</option>
                        <option value="sales-team">销售团队</option>
                        <option value="service-team">服务团队</option>
                        <option value="marketing-team">市场团队</option>
                    </select>
                </div>
            </div>
            
            <div class="kpi-grid">
                <!-- 销售业绩指标 -->
                <div class="card kpi-card">
                    <div class="kpi-header">
                        <div>
                            <div class="kpi-title">销售业绩</div>
                            <div class="kpi-value">¥3,850,000</div>
                            <div class="kpi-status">目标: ¥5,000,000 (77%)</div>
                        </div>
                    </div>
                    
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar kpi-at-risk" style="width: 77%;"></div>
                    </div>
                    
                    <div class="kpi-meta">
                        <div>2023年第3季度</div>
                        <div>同比: +12%</div>
                    </div>
                    
                    <div class="kpi-trend">
                        <img src="https://via.placeholder.com/350x40?text=趋势图" alt="趋势" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <div class="kpi-actions">
                        <button class="alert-btn" onclick="toggleAlert(this, 1)">
                            <span>⚠️</span> 提醒
                        </button>
                    </div>
                </div>
                
                <!-- 新客户获取指标 -->
                <div class="card kpi-card">
                    <div class="kpi-header">
                        <div>
                            <div class="kpi-title">新客户获取</div>
                            <div class="kpi-value">127</div>
                            <div class="kpi-status">目标: 150 (85%)</div>
                        </div>
                    </div>
                    
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar kpi-at-risk" style="width: 85%;"></div>
                    </div>
                    
                    <div class="kpi-meta">
                        <div>2023年第3季度</div>
                        <div>同比: +8%</div>
                    </div>
                    
                    <div class="kpi-trend">
                        <img src="https://via.placeholder.com/350x40?text=趋势图" alt="趋势" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <div class="kpi-actions">
                        <button class="alert-btn" onclick="toggleAlert(this, 2)">
                            <span>⚠️</span> 提醒
                        </button>
                    </div>
                </div>
                
                <!-- 客户满意度指标 -->
                <div class="card kpi-card">
                    <div class="kpi-header">
                        <div>
                            <div class="kpi-title">客户满意度</div>
                            <div class="kpi-value">4.7</div>
                            <div class="kpi-status">目标: 4.5 (104%)</div>
                        </div>
                    </div>
                    
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar kpi-on-track" style="width: 100%;"></div>
                    </div>
                    
                    <div class="kpi-meta">
                        <div>2023年第3季度</div>
                        <div>同比: +0.3</div>
                    </div>
                    
                    <div class="kpi-trend">
                        <img src="https://via.placeholder.com/350x40?text=趋势图" alt="趋势" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <div class="kpi-actions">
                        <button class="alert-btn alert-on" onclick="toggleAlert(this, 3)">
                            <span>⚠️</span> 提醒
                        </button>
                    </div>
                </div>
                
                <!-- 客户流失率指标 -->
                <div class="card kpi-card">
                    <div class="kpi-header">
                        <div>
                            <div class="kpi-title">客户流失率</div>
                            <div class="kpi-value">3.2%</div>
                            <div class="kpi-status">目标: <3% (93%)</div>
                        </div>
                    </div>
                    
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar kpi-at-risk" style="width: 93%;"></div>
                    </div>
                    
                    <div class="kpi-meta">
                        <div>2023年第3季度</div>
                        <div>同比: -0.5%</div>
                    </div>
                    
                    <div class="kpi-trend">
                        <img src="https://via.placeholder.com/350x40?text=趋势图" alt="趋势" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <div class="kpi-actions">
                        <button class="alert-btn" onclick="toggleAlert(this, 4)">
                            <span>⚠️</span> 提醒
                        </button>
                    </div>
                </div>
                
                <!-- 销售转化率指标 -->
                <div class="card kpi-card">
                    <div class="kpi-header">
                        <div>
                            <div class="kpi-title">销售转化率</div>
                            <div class="kpi-value">18.5%</div>
                            <div class="kpi-status">目标: 20% (93%)</div>
                        </div>
                    </div>
                    
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar kpi-at-risk" style="width: 93%;"></div>
                    </div>
                    
                    <div class="kpi-meta">
                        <div>2023年第3季度</div>
                        <div>同比: +1.2%</div>
                    </div>
                    
                    <div class="kpi-trend">
                        <img src="https://via.placeholder.com/350x40?text=趋势图" alt="趋势" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <div class="kpi-actions">
                        <button class="alert-btn" onclick="toggleAlert(this, 5)">
                            <span>⚠️</span> 提醒
                        </button>
                    </div>
                </div>
                
                <!-- 平均响应时间指标 -->
                <div class="card kpi-card">
                    <div class="kpi-header">
                        <div>
                            <div class="kpi-title">平均响应时间</div>
                            <div class="kpi-value">2.5小时</div>
                            <div class="kpi-status">目标: <4小时 (160%)</div>
                        </div>
                    </div>
                    
                    <div class="kpi-progress">
                        <div class="kpi-progress-bar kpi-on-track" style="width: 100%;"></div>
                    </div>
                    
                    <div class="kpi-meta">
                        <div>2023年第3季度</div>
                        <div>同比: -15%</div>
                    </div>
                    
                    <div class="kpi-trend">
                        <img src="https://via.placeholder.com/350x40?text=趋势图" alt="趋势" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <div class="kpi-actions">
                        <button class="alert-btn" onclick="toggleAlert(this, 6)">
                            <span>⚠️</span> 提醒
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            function createKPI() {
                alert('打开添加指标对话框');
            }
            
            function switchTab(tab) {
                // 移除所有标签的激活状态
                document.querySelectorAll('.tab').forEach(t => {
                    t.classList.remove('active');
                });
                
                // 激活选中的标签
                document.querySelector(`.tab[onclick="switchTab('${tab}')"]`).classList.add('active');
                
                // 实际应用中这里需要筛选KPI
                alert('切换到' + tab + '标签');
            }
            
            function updateKPIs() {
                const timeRange = document.getElementById('timeRangeFilter').value;
                const status = document.getElementById('statusFilter').value;
                const owner = document.getElementById('ownerFilter').value;
                
                alert('更新KPI列表: 时间=' + timeRange + ', 状态=' + status + ', 责任人=' + owner);
                // 这里应该是实际的AJAX请求更新数据
            }
            
            function toggleAlert(btn, kpiId) {
                btn.classList.toggle('alert-on');
                alert((btn.classList.contains('alert-on') ? '开启' : '关闭') + ' KPI #' + kpiId + ' 的提醒');
            }
        </script>
    </th:block>
</body>
</html> 